
<script setup lang="ts">
import Monitor from '../components/Monitor.vue';
import Keyboard from '../components/Keyboard.vue';
import Desk from '@/components/Desk.vue';
import Mouse from '@/components/Mouse.vue';
import System from '@/components/System.vue';
import { h, onMounted, ref } from 'vue';
import SystemDeskopItem from '@/components/SystemDeskopItem.vue';
import IconChrome from '@/components/icons/IconChrome.vue';
import IconNotepad from '@/components/icons/IconNotepad.vue';
import browserContent from '@/components/app/BrowserContent.vue';
import notebook from '@/components/Notebook.vue';
import cup from '@/components/Cup.vue';
import electricFan from '@/components/ElectricFan.vue';
import popMenu from '@/components/PopMenu.vue';
import phone from '@/components/Phone.vue';
import type { sys } from 'typescript';
import PhoneTable from '@/components/PhoneTable.vue';
import MonitorTable from '@/components/MonitorTable.vue';
import Spliter from '@/components/Spliter.vue';
import Bookshelf from '@/components/Bookshelf.vue';
import Book from '@/components/Book.vue';
import Box from '@/components/Box.vue';
import Mac from '@/components/Mac.vue';
import Cabinet from '@/components/Cabinet.vue';
import CabinetDrawer from '@/components/CabinetDrawer.vue';
import Thermometer from '@/components/Thermometer.vue';
import PowerStrip from '@/components/PowerStrip.vue';
import NotebookTable from '@/components/NotebookTable.vue';
const system = ref({} as object);
const fullScreen = ref(false);
function keyChange(keys: number[]) {
  // console.log(keys);
}

onMounted(() => {
  system.value = h(System, {fontSize: '0.5rem'});
  
  window.addEventListener('keydown', (e) => {
    console.log(e.key);
    if (e.key === 'Escape') {
      fullScreen.value = !fullScreen.value;
    }      
  })
});
const fontSizeGlobal = ref(0);

    function handleResize() {
			
			// 设置根元素的字体大小
      const fontSize=window.innerWidth / 100;
			fontSizeGlobal.value=fontSize;
			document.documentElement.style.setProperty('font-size', fontSize+'px');

		}
    
		window.onresize = handleResize;
		handleResize();

    
</script>
<template>
  <div class="pc" oncontextmenu="return false">
   
        <!-- <Spliter /> -->
        <!-- <Desk  ></Desk> -->
        <!-- <notebook :system-content="system"></notebook>                       -->
        <!-- <PhoneTable/> -->
        <!-- <phone :isPower="false" bgColor="#333"/> -->
        <!-- <Monitor v-if="system" :system-content="system"></Monitor> -->
        <!-- <cup  /> -->
        <!-- <electricFan ></electricFan> -->
        <!-- <Keyboard   @change="keyChange" :full="true"></Keyboard> -->
        <!-- <Keyboard   @change="keyChange" :full="false"></Keyboard> -->
        <!-- <Mouse></Mouse> -->
        <!-- <System fontSize="1rem"></System> -->
        
        <!-- <Bookshelf></Bookshelf> -->
        <!-- <Book/> -->        
        <!-- <Box/> -->
        <!-- <Mac></Mac> -->
        <!-- <Cabinet></Cabinet> -->
        <!-- <CabinetDrawer></CabinetDrawer> -->
<!--        <Thermometer></Thermometer>-->
<!--        <PowerStrip/>-->
        <NotebookTable/>
  </div>
</template>

<style>
/* @media (min-width: 1024px) { */
  .pc {
    
			user-select: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background: black; */
		perspective:110em;
    position: relative;
    font-size: 1rem;    
  }
/* } */
.pc .selector {
  position: absolute;
  bottom: 1em;
  left: 0;
  width: 100%;
  height: 1em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 999;
  font-size: 1rem;
  background-color: white;
  padding: 1em;
  
}
.pc .selector-item {
  display: flex;
  flex-direction: row;
  line-height: 1em;
  margin: 0 0.2em;
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
}
.pc .selector-item:hover {
  transform: scale(1.1);
  font-size: 1.1rem;
}
.pc .selector-item span {
  width: 1em;
  height: 1em;
  background-color: #333;
}
.pc .active span {
  background-color: #02f40a;
}
</style>
